<!-- 图标 -->
<template>
  <div class="icon-info-form">
    <el-form :model="props.icon" label-width="100px">
      <!-- 图标名称输入框 -->
      <el-form-item label="图标名称">
        <el-input 
          v-model="props.icon.name" 
          placeholder="请输入图标名称"
          :disabled="props.openType === 'preview'"
        />
      </el-form-item>
      
      <!-- 图片显示区域 -->
      <el-form-item label="图标预览">
        <div class="image-preview">
          <img 
            v-if="props.icon.url" 
            :src="props.icon.url" 
            alt="图标预览" 
            class="preview-image"
          />
          <div v-else class="no-image">
            <el-icon><Picture /></el-icon>
            <span>暂无图片</span>
          </div>
        </div>
      </el-form-item>
      
      <!-- 图片上传或URL输入 -->
      <el-form-item label="图标来源">
        <el-tabs v-model="sourceType" :disabled="props.openType === 'preview'">
          <!-- 上传图片 -->
          <el-tab-pane label="本地上传" name="upload">
            <el-upload
              class="upload-demo"
              action="#"
              :auto-upload="false"
              :show-file-list="false"
              :on-change="handleFileChange"
              accept="image/*"
            >
              <el-button type="primary" :disabled="props.openType === 'preview'">
                选择图片
              </el-button>
              <template #tip>
                <div class="el-upload__tip">
                  请选择图片文件，支持 jpg/png/gif 格式
                </div>
              </template>
            </el-upload>
          </el-tab-pane>
          
          <!-- URL输入 -->
          <el-tab-pane label="网络地址" name="url">
            <el-input 
              v-model="urlInput" 
              type="textarea"
              :rows="4"
              placeholder="请输入图片url"
              :disabled="props.openType === 'preview'"
            />
            <div style="margin-top: 10px; text-align: right;">
              <el-button 
                @click="loadImageUrl" 
                :disabled="props.openType === 'preview'"
                type="primary"
              >
                加载
              </el-button>
            </div>
          </el-tab-pane>

          <!-- 当前url -->
          <el-tab-pane label="当前URL" name="currentUrl">
            <el-input 
              type="textarea"
              :rows="4"
              :model-value="props.icon.url" 
              placeholder="当前图片URL"
              disabled
            />
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { Icon, createIcon } from '@/pojo/kd-icon';
import type { UploadFile } from 'element-plus';
import { Picture } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { uploadImgBlob } from '@/api/index'; // 引入上传方法
const props = defineProps<{
  icon: Icon; // 必须符合 Icon 类型
  openType: string; // 打开方式 add/edit/preview
}>();

// 图标来源类型
const sourceType = ref('upload');

// URL输入框
const urlInput = ref('');

// 监听传入参数的变化
watch(
  () => props.icon,
  (newVal) => {
    if (newVal) {
     urlInput.value = newVal.url || '';
    }
  },
  { immediate: true }
);

// 上传前的处理
const beforeUpload = (file: File) => {
  const isImage = file.type.startsWith('image/');
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    ElMessage.error('上传图片只能是图片格式!');
  }
  if (!isLt2M) {
    ElMessage.error('上传图片大小不能超过 2MB!');
  }
  
  return isImage && isLt2M;
};

// 处理文件上传
const handleFileChange = (file: UploadFile) => {
  if (file.raw) {
    // 验证文件
    if (!beforeUpload(file.raw)) {
      return;
    }
    
    // 使用 uploadImgBlob 方法上传文件
    uploadImgBlob({
      url: 'file/uploadImg', // 请根据实际接口路径修改
      file: file.raw,
      success: (res) => {
        // 假设服务器返回格式为 { code: 200, data: { url: '图片链接' } }
        // 请根据实际API返回格式调整
        if (res.code == 0) {
          props.icon.url = res.data.url;
          urlInput.value = res.data.url;
          ElMessage.success('图片上传成功');
        } else {
          ElMessage.error('图片上传失败: ' + (res?.msg || '未知错误'));
        }
      }
    });
  }
};

// 加载图片URL
const loadImageUrl = () => {
  if (urlInput.value) {
    props.icon.url = urlInput.value;
  }
};

</script>

<style scoped>
.icon-info-form {
  padding: 20px;
}

.image-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  background-color: #fafafa;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.no-image {
  text-align: center;
  color: #999;
}

.no-image .el-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.upload-demo {
  width: 100%;
}
</style>